<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <a-tabs type="card">
      <a-tab-pane key="1" tab="调拨订单信息">
        <allocate-and-transfer-order-info-tab ref="allocateAndTransferOrderInfoTab" :record="model"></allocate-and-transfer-order-info-tab>
      </a-tab-pane>
      <a-tab-pane key="2" tab="订单材料信息">
        <allocate-and-transfer-material-info-tab ref="allocateAndTransferMaterialInfoTab" :materialData="materialData" :record="model"></allocate-and-transfer-material-info-tab>
      </a-tab-pane>
    </a-tabs>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :footer="null"
    switchFullscreen
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <div>
      <a-row>
        <a-col :span="5">
          <span style="font-weight: bold">编号：</span>{{model.allocateAndTransferNo}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">调拨日期：</span>{{model.allocateAndTransferTime == null ? "无" : model.allocateAndTransferTime}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">调出仓库：</span>{{model.outDepository}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">调入仓库：</span>{{model.inDepository}}
        </a-col>
        <a-col :span="4">
          <span style="font-weight: bold">创建人：</span>{{model.createBy}}
        </a-col>
      </a-row>
    </div>

    <div style="margin-top: 20px;margin-bottom: 20px">
      <a-row>
        <a-col :span="5">
          <span style="font-weight: bold">创建时间：</span>{{model.createTime}}
        </a-col>
        <a-col :span="5">
          <span style="font-weight: bold">订单状态：</span>{{getOrderStatusValue(model.status)}}
        </a-col>
        <a-col :span="9">
          <span style="font-weight: bold">备注：</span>{{model.remark == null || model.remark == "" ? "无":model.remark}}
        </a-col>
        <a-col :span="4">
          <a-button style="margin-right: 10px;margin-left: 10px" type="primary" @click="leadingOut">导出Excel</a-button>
        </a-col>
      </a-row>
    </div>

    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        class="j-table-force-nowrap"
        bordered
        :data-source="materialData"
        :columns="columns"
        :pagination="false"
        :rowKey="(record,index)=>{return index}"
      >
      </a-table>
    </div>
  </j-modal>-->
</template>

<script>
  import {httpAction, getAction, deleteAction, postAction} from '@/api/manage'
  import {validateDuplicateValue} from '@/utils/util'
  import '@/assets/less/TableExpand.less'
  import allocateAndTransferMaterialInfoTab from "./tab/allocateAndTransferMaterialInfoTab";
  import allocateAndTransferOrderInfoTab from "./tab/allocateAndTransferOrderInfoTab";

  export default {
    name: 'purchaseOrderDetailModal',
    components: {
      allocateAndTransferOrderInfoTab,
      allocateAndTransferMaterialInfoTab
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },

    data() {
      return {
        materialData: [],
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: '3%',
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '名称',
            dataIndex: 'materialName',
            width: '13%',
            align: "center",
            scopedSlots: {customRender: 'materialName'},
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text
            }
          },
          {
            title: '型号',
            dataIndex: 'modelNumber',
            width: '12%',
            align: "center",
            scopedSlots: {customRender: 'modelNumber'},
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text
            }
          },
          {
            title: '规格',
            dataIndex: 'specifications',
            width: '13%',
            align: "center",
            scopedSlots: {customRender: 'specifications'},
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text
            }
          },
          {
            title: '品牌',
            dataIndex: 'brand',
            width: '12%',
            align: "center",
            scopedSlots: {customRender: 'brand'},
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text
            }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            width: '5%',
            align: "center",
          },
          {
            title: '市场价',
            dataIndex: 'marketPrice',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'marketPrice'},
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text + "元"
            }
          },
          {
            title: '预算价',
            dataIndex: 'estimatedCost',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'estimatedCost'},
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text + "元"
            }
          },
          {
            title: '成本价',
            dataIndex: 'costPrice',
            width: '5%',
            align: "center",
            customRender:function (text) {
              return (text == null || text == '-')? "-" : text + "元"
            }
          },
          {
            title: '数量',
            dataIndex: 'allocateAndTransferNum',
            width: '5%',
            align: "center",
            scopedSlots: {customRender: 'allocateAndTransferNum'},
          },
          {
            title: '备注',
            dataIndex: 'remark',
            width: '12%',
            align: "center",
            scopedSlots: {customRender: 'remark'},
            customRender:function (text) {
              return text == null ? "无" : text
            }
          },
        ],
        title: '',
        width: '100%',
        visible: false,
        disableSubmit: false,
        fullscreen: true,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        url: {
          queryAllocateAndTransferItemList: "/ghSupplychainAllocateAndTransferItem/list",
        },
        statusValue:"",
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {

    },
    methods: {
      getOrderStatusValue(status){
        switch (status) {
          case 1:
            this.statusValue = "草稿"
            return "草稿"
          case 2:
            this.statusValue = "审批中"
            return "审批中"
          case 3:
            this.statusValue = "审批通过"
            return "审批通过"
          case 4:
            this.statusValue = "未通过"
            return "未通过"
          case 5:
            this.statusValue = "已撤销"
            return "已撤销"
        }
      },

      showDetail(record) {
        this.getOrderStatusValue(record.status)
        this.model = Object.assign({}, record);
        this.model.statusValue = this.statusValue;
        getAction(this.url.queryAllocateAndTransferItemList, {id: record.id}).then((res) => {
          if (res.success) {
            this.materialData = res.result.records || res.result;
          }
        })
        this.visible = true;
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }

  .tableHiddle {
    display: none;
  }
</style>